<template>
  <div class="box_container">
    <a-form
      :form="form"
      layout="inline"
      :label-col="{span: 6, offset: 1}"
      :wrapper-col="{span: 15}"
    >
      <a-row>
        <a-col :md="8" :sm="24">
          <a-form-item label="姓名">
            <a-input
              v-decorator="['username', validatorRules.username]"
              placeholder="请输入姓名"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="工号">
            <a-input
              v-decorator="['employee_num', validatorRules.employee_num]"
              placeholder="请输入工号"
              @blur="employNumBlur"
            ></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="8" :sm="24">
          <a-form-item label="性别" prop="sex">
            <a-select
              v-decorator="['sex', validatorRules.sex]"
              placeholder="请选择性别"
              style="width:100%"
            >
              <a-select-option value="">请选择</a-select-option>
              <a-select-option key="男" value="男">
                <span
                  style="display: inline-block;width: 100%"
                  title="男">男
                </span>
              </a-select-option>
              <a-select-option key="女" value="女">
                <span
                  style="display: inline-block;width: 100%"
                  title="女">女
                </span>
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="所属部门" prop="dep_id">
            <a-select
              v-decorator="['dep_id', validatorRules.dep_id]"
              placeholder="请选择所属部门">
              <a-select-option value="">请选择</a-select-option>
              <a-select-option
                v-for="(item) in departments"
                :key="item.id"
                :value="item.id">
                <span
                  style="display: inline-block;width: 100%"
                  :title=" item.name">
                  {{ item.name }}
                </span>
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="8" :sm="24">
          <a-form-item label="职位" prop="item_val">
            <a-select
              v-decorator="['item_val', validatorRules.item_val]"
              placeholder="请选择职位"
              popper-class="select-option"
              style="width:100%"
            >
              <a-select-option value="">请选择</a-select-option>
              <a-select-option
                v-for="item in positionList"
                :key="item.item_val"
                :value="item.item_val">
                <span
                  style="display: inline-block;width: 100%"
                  :title=" item.item_desc">
                  {{ item.item_desc }}
                </span>
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="手机" prop="telephone">
            <a-input
              v-decorator="['telephone', validatorRules.telephone]"
              placeholder="请输入手机号"
            ></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="8" :sm="24">
          <span class="table-edit-submitButtons">
            <a-button type="primary" class="ml8" @click="submitForm('formData')">保存</a-button>
            <a-button class="ml8" @click="$emit('update:showChild', false)">取消</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
import { checkNum, checkPhone } from '@/utils/util'

export default {
  name: 'AddStaff',
  props: {
    showChild: {
      type: Boolean,
      default: false
    },
    openType: {
      type: Number,
      default: 0 // 0 添加 1 编辑
    },
    positionList: {
      type: Array,
      default: () => []
    },
    formData: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    departments () {
      return this.$store.getters.departments
    },
    employees () {
      return this.$store.getters.employees
    }
  },
  data () {
    return {
      form: this.$form.createForm(this, {}),
      ruleFormStaff: {
        // 员工表单
        employee_num: '',
        username: '',
        sex: '',
        item_type_id: '1',
        item_val: '',
        telephone: '',
        dep_id: ''
      },
      validatorRules: {
        employee_num: { rules: [
            { required: true, message: '请输入工号', trigger: 'blur' },
            { validator: checkNum, trigger: 'blur' }]
        },
        username: { rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }] },
        sex: { rules: [{ required: true, message: '请选择性别', trigger: 'blur' }] },
        telephone: { rules: [
            { required: true, message: '请输入电话', trigger: 'blur' },
            { validator: checkPhone, trigger: 'blur' }
          ] },
        item_val: { rules: [{ required: false, message: '请选择职位', trigger: 'blur' }] },
        dep_id: { rules: [{ required: true, message: '请选择所属部门', trigger: 'blur' }] }
      }
    }
  },
  created () {
    if (this.openType === 1) {
      this.ruleFormStaff = Object.assign(this.ruleFormStaff, this.formData)
      console.log('this.formData', this.ruleFormStaff)
    }
  },
  mounted () {
    if (this.openType === 1) {
      this.form.setFieldsValue({
        employee_num: this.ruleFormStaff.employee_num,
        username: this.ruleFormStaff.username,
        sex: this.ruleFormStaff.sex,
        item_val: this.ruleFormStaff.item_val,
        telephone: this.ruleFormStaff.telephone,
        dep_id: this.ruleFormStaff.dep_id
      })
    }
  },
  methods: {
    employNumBlur (e) {
      const employeeNum =e.target.value
      for (let i = 0; i < this.employees.length; i++) {
        if (this.employees[i]['employee_num'] == employeeNum) {
          this.$message.warning('员工工号重复')
          this.form.setFieldsValue({
            employee_num: ''
          })
          break
        }
      }
    },
    getStaffList () {},
    submitForm (form) {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$emit('update:showChild', false)
          if (this.openType === 0) {
            values.item_type_id = '1'
            this.$emit('addStaff', values)
          } else if (this.openType === 1) {
            values.id = this.formData.id
            values.item_type_id = this.formData.item_type_id
            this.$emit('updateStaff', values)
          }
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
